<script setup>
import ThemeManager from './components/ThemeManager.vue'
</script>

<template>
  <div id="app">
    <nav class="app-nav">
      <router-link to="/homePage">首页</router-link> |
      <router-link to="/demo">组件演示</router-link> |
      <router-link to="/about">关于</router-link> |
      <router-link to="/element-css">Element样式</router-link> |
      <router-link to="/hooks">Hooks演示</router-link> |
      <router-link to="/theme-test">主题测试</router-link> |
      <router-link to="/debounce-throttle">防抖/节流</router-link>
    </nav>
    <router-view />
    <ThemeManager />
  </div>
</template>

<style scoped>
#app {
  width: 100%;
  min-height: 100vh;
}

.app-nav {
  background-color: rgba(var(--demo-bg-color-rgb, 255, 255, 255), 0.9);
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
  transition: background-color 0.3s ease;
}

.app-nav a {
  color: #606266;
  text-decoration: none;
  margin: 0 8px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.app-nav a:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

.app-nav a.router-link-active {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
  font-weight: 500;
}
</style>
